import navTpl from './tpl/nav.tpl';
import navItemTpl from './tpl/nav_item.tpl';
import './index.scss';
import tools from '../../../utils/tools';
import { NavMenu } from './nav_menu/'

class Nav {
  constructor () {
    this.name = 'headerNav';
    this.navMenu = new NavMenu();
    this.htmlCache = {};
  }
  tpl (data) {
    let list = '';
    data.forEach((item) => {
      list += tools.tplReplace(navItemTpl(), {
        field: item.field,
        seriesName: item.series_name
      })
    })
    return tools.tplReplace(navTpl(), {
      navItems: list,
      navMenu: this.navMenu.tpl()
    })
  }
  navMenuMouseIn (e) {
    const phoneDatas = e.data.phoneDatas,
    // 参数：oNav 因为加载dom是异步的，所有this.navMenu拿到的数据为undefined的
          oNav = e.data.nav, 
          field = $(this).attr('data-field'),
          $navMenu = $('.J_navMenu');
    if(!oNav.htmlCache[field]) {
      oNav.htmlCache[field] = phoneDatas.filter((item) => {
        return item.field === field
      })
    }
    $navMenu.html(oNav.navMenu.appendMenuCards(oNav.htmlCache[field]));
  }
}
export { Nav }